<!-- d3js 气泡图 -->
<template>
    <div style="margin-bottom: 10px; width: 100%;" :style="{height: max_Height + 'px'}">
        <div ref="chart" style="width:99%;min-height:95%;max-height: 99%;overflow: auto"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {DatasetComponent, TooltipComponent, VisualMapComponent} from 'echarts/components';
import {CustomChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import * as d3 from 'd3';
import {
    heightConfig3,
    my_renderItem,
    my_stratify_1,
    set_option_scatterDiagram,
    set_option_scatterDiagram2_base
} from "@/utils/loadPage";

echarts.use([
    DatasetComponent,
    TooltipComponent,
    VisualMapComponent,
    CustomChart,
    CanvasRenderer
]);
let that = null;
let renderItem_function = null;
export default {
    name: 'ScatterDiagram2',
    data() {
        return {
            max_Height: heightConfig3(),
            option: {},
            form: {
                api: null,
                idx: null,
                id: 'id',  // 数据项名称对应数据项的id
                value: 'value',  // 对应数据项的值
                option: 'option', // 父节点ID
                context: null,
                dataList: [],
            },
            displayRoot: null,
        };
    },

    mounted() {
        that = this
        this.handleResize()
        // // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 8000)
    },


    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },
    methods: {
        overallLayout(params, api) {
            let context = params.context;
            d3
                    .pack()
                    .size([api.getWidth() - 4, api.getHeight() - 2])
                    .padding(20)(this.displayRoot);
            context.nodes = {};

            this.displayRoot.descendants().forEach(function (node) {
                context.nodes[node.id] = node;
            });
        },
        renderItem(params, api) {
            that.form.context = params.context;
            that.form.idx = params.dataIndex;
            // Only do that layout once in each time `setOption` called.
            // 每次调用“setOption”时，只能进行一次布局。
            if (!that.form.context.layout) {
                that.form.context.layout = true;
                that.overallLayout(params, api);
            }
            that.form.api = api;
            return my_renderItem(that, that.form);
        },


        handleResize() {
            // 处理窗口大小变化事件，重新获取支付信息
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data();
            this.displayRoot = my_stratify_1(this, this.form);
            renderItem_function = this.renderItem
            this.set_option()
        },
        get_data() {
            let daysArray = ['维修安装', '个人卫生护理', '生活照料', '助餐服务', '助洁服务', '助行服务', '陪护服务', '健康评估', '康复训练', '心理辅导', '其他'];
            this.form.dataList = [{id: 'option', value: 0}];
            for (let i = 0; i < daysArray.length; i++) {
                let id = 'option.' + daysArray[i];
                let value = Math.floor(Math.random() * 300 + 50); // 生成 50 到 350 之间的随机总数
                this.form.dataList.push({id, value}); // 添加到数据源
            }
        },

        set_option() {
            // 设置图表选项，如果已有图表实例则销毁旧的，重新初始化并设置新选项
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart) // 初始化 ECharts 实例
            let option = set_option_scatterDiagram2_base(that, that.form, renderItem_function);
            this.myChart.setOption(option) // 设置图表选项
        },
    }
}

</script>
